<template>
  <div class="container">
    <div class="nav">
      <div class="nav_con">
        <div>
          <nuxt-link :to="{ path: '/download' }">{{
            $t("yiDongDuan")
          }}</nuxt-link>
        </div>
        <div>
          <a href="https://seller.halykmall.com" target="_blank">{{
            $t(`page.user.seller`)
          }}</a>
        </div>
        <div>
          <nuxt-link :to="{ path: '/' }">{{
            $t(`page.goodsDetail.home`)
          }}</nuxt-link>
        </div>
        <!-- <div @click="AddFavorite()">
          {{ $t(`page.index.collectSite`) }}
        </div> -->
        <div>
          <nuxt-link :to="{ path: '/users/order_list?orderStatus=1' }"
            >{{ $t(`page.user.myOrder`) }}
          </nuxt-link>
        </div>
        <div @click="goMerSettled()">
          {{ $t(`page.index.applyFor`) }}
        </div>
        <!-- <div @click="go()">
          {{ $t(`page.index.mobileMall`) }}
        </div> -->
      </div>
    </div>
    <div class="header">
      <div class="header_con">
        <div class="logo">
          <nuxt-link :to="{ path: '/' }"
            ><img :src="logoUrl" alt=""
          /></nuxt-link>
        </div>
        <div class="more-but" @click="show(true)">
          <span class="iconfont2 ic-fenlei"></span>
          <!-- 分类 -->
        </div>
        <div class="home-input">
          <div class="left_select">
            <input
              type="text"
              :placeholder="$t(`page.goodsSearch.placeSearch`)"
              v-model="search"
            />
          </div>
          <div class="search" @click="submit">
            <span class="iconfont2 ic-sousuo"></span>
          </div>
        </div>
        <el-dropdown v-if="debugShow">
          <div class="lang-card">
            <span class="iconfont2 ic-yuyanqiehuan"></span>
            <!-- <span> Русский язык</span> -->
          </div>
          <el-dropdown-menu slot="dropdown">
            <template v-for="item in langList">
              <el-dropdown-item
                v-for="(items, idx) in item.intro"
                :key="idx"
                @click.native="languagelTab(items)"
              >
                {{ $t(`userDrawer.language[${idx}].name`) }}
              </el-dropdown-item>
            </template>
          </el-dropdown-menu>
        </el-dropdown>

        <nuxt-link to="/order/shopping_cart" class="car-card">
          <div class="car">
            <span class="iconfont2 ic-gouwuche"></span>
            <span v-if="$store.state.cartNumber" class="num">{{
              $store.state.cartNumber
            }}</span>
          </div>
        </nuxt-link>
        <el-divider direction="vertical"></el-divider>
        <div class="login-user" v-if="!$auth.user">
          <span @click="longin" class="login-user-img">
            <span class="iconfont2 ic-gerenxinxi"></span>
          </span>
        </div>
        <div class="login-user" v-else>
          <el-dropdown>
            <span class="login-user-img">
              <img :src="$auth.user ? $auth.user.avatar : defaultPic" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <div class="userBox acea-row row-middle">
                <div class="avatarPic">
                  <img :src="$auth.user ? $auth.user.avatar : defaultPic" />
                </div>
                <div>
                  <div class="nickname">{{ $auth.user.nickname }}</div>
                  <div v-show="$auth.user.phone" class="count">
                    {{ $auth.user.phone }}
                  </div>
                  <div v-show="$auth.user.email" class="count">
                    {{ $auth.user.email }}
                  </div>
                </div>
              </div>
              <el-dropdown-item
                v-for="(menu, index) in userMenu"
                :key="menu.id"
                @click.native="goPage(menu)"
              >
                <div class="dropdownBox" v-show="menu.pc_url">
                  {{ $t(`page.user.mineNav[${index}].name`) }}
                </div>
              </el-dropdown-item>
              <div class="userInfo">
                <el-divider></el-divider>
              </div>
              <el-dropdown-item
                v-for="menu in menus"
                :key="menu.id"
                @click.native="goPage(menu)"
              >
                <div class="dropdownBox" v-show="menu.pc_url">
                  {{ menu.translateName }}
                </div>
              </el-dropdown-item>
              <div class="btnBox">
                <!-- <el-button @click="loginOMS">{{
                  $t(`page.users.userInfo.loginOMS`)
                }}</el-button> -->
                <el-button @click="longOut">{{
                  $t(`page.users.userInfo.logOut`)
                }}</el-button>
              </div>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
    <div class="classifyDialog">
      <el-dialog
        v-if="hide"
        :visible.sync="hide"
        top="144px"
        width="1200px"
        :show-close="false"
        :modal-append-to-body="false"
      >
        <div>
          <classifyCard @goCate="goCate" />
        </div>

        <!-- <div class="category acea-row">
          <div class="sort">
            <div
              class="item acea-row row-between-wrapper"
              :class="index === current ? 'bg-color colorfff' : ''"
              v-for="(item, index) in $store.state.productClassify"
              :key="index"
              @mouseenter="enter(index)"
            >
              <div class="name line1">{{ item.name }}</div>
            </div>
          </div>
          <classifyCard
            v-show="seen && categoryCurrent"
            @goCate="goCate"
            :list="categoryCurrent"
          />
        </div> -->
      </el-dialog>
    </div>
  </div>
</template>
<script>
// import VueI18n from 'vue-i18n';
// const i18n = new VueI18n();
import { configMap } from "@/utils/validate.js";
// import classifyCard from "@/components/classify.vue";
import classifyCard from "@/components/classifyCard.vue";
import { toTranslateLang, mapToLang } from "@/utils/index.js";
export default {
  name: "headers",
  components: {
    classifyCard,
  },
  mixins: [],
  data() {
    return {
      //debugShow: process.env.NODE_ENV === "development" ? true : false,
      debugShow: true,
      categoryCurrent: [],
      langList: [
        {
          name: "语言",
          current: 1,
          intro: ["zh-CN", "en", "ru", "kz"],
        },
      ],
      menus: [],
      seen: false,
      hide: false,
      navBarFixed: false,
      headerList: [],
      search: "",
      userInfo: {},
      showCode: false,
      hotSearchList: [],
      searchList: [],
      list: [],
      dialogVisible: false,
      current: -1,
      info: "",
      isShow: true,
      appidNum: "",
      hosts: "",
      fromPath: "",
      disabled: false,
      defaultPic: require("../assets/images/morentou.png"),
      cid: null,
      userMenu: [
        {
          id: 111,
          name: this.$t(`page.user.myOrder`),
          pc_url: "/users/order_list",
        },
        {
          id: 222,
          name: this.$t(`page.users.goodsReturn.refundList`),
          pc_url: "/users/refund_list",
        },
        {
          id: 333,
          name: this.$t(`page.users.replyList.navTitle`),
          pc_url: "/users/evaluation_list",
        },
      ],
    };
  },
  computed: {
    ...configMap(["logoUrl"]),
    locale() {
      return mapToLang(this.$i18n.locale);
    },
  },
  watch: {
    $route: {
      handler: function (newVal, oldVal) {
        this.search = newVal.query.title ? newVal.query.title : "";
      },
      // 深度观察监听
      deep: true,
    },
    "$auth.loggedIn": {
      handler: function (newVal, oldVal) {
        if (newVal) {
          this.getMenus();
          this.carCount();
        }
      },
      immediate: true,
    },
  },
  head() {
    if ($nuxt.$route.path == "/") {
      this.navBarFixed = false;
    }
    return {
      title: this.$store.state.titleCon,
    };
  },
  beforeMount() {
    this.getHotSearchList();
    this.$store.dispatch("getProductClassify");
  },
  mounted() {
    window.addEventListener("keydown", this.keyDown);
    this.hosts = location.origin + location.pathname;
    this.fromPath = this.$cookies.get("fromPath");
    window.addEventListener("scroll", this.watchScroll);
  },
  destroyed() {
    window.removeEventListener("keydown", this.keyDown, false);
  },
  methods: {
    show(tg) {
      this.hide = tg;
    },
    carCount() {
      this.$axios
        .get("/api/front/cart/count?numType=true&type=sum")
        .then((res) => {
          this.$store.commit("cartNum", res.data.count);
        });
    },
    /**
     *
     * 语言切换
     */
    languagelTab(n) {
      this.$i18n.locale = n;
      this.$cookies.remove("locale");
      this.$cookies.set("locale", n);
      this.$store.commit("SET_LANG", n);
      this.$store.dispatch("getProductClassify");
      location.reload();
    },
    /**
     *
     * 退出登录
     */
    async longOut() {
      let val = this.$cookies.get("auth.strategy");
      await this.$auth.logout().then((res) => {
        this.$store.commit("cartNum", 0);
        // window.localStorage.clear();
        this.$router.replace({
          path: "/",
        });
      });
    },
    go(url) {
      // window.open();
    },
    // 商品分类
    goCate(items) {
      this.hide = false;
      this.cid = items.id;
      this.$router.push({
        path: "/goods/goods_search",
        query: {
          cid: items.id,
          title: this.search ? this.search.trim() : "",
        },
      });
    },
    /**
     *
     * 商户入驻
     */
    goMerSettled() {
      this.$router.push({
        path: `/users/merchant_settled`,
        query: { menuCur: 70 },
      });
    },
    goPage(menu) {
      this.$router.push({
        path: `${menu.pc_url}`,
        query: { menuCur: menu.id },
      });
    },
    getMenus() {
      this.$axios.get("/api/front/user/menu/user").then((res) => {
        if (res.data.routine_my_menus) {
          res.data.routine_my_menus = toTranslateLang(
            res.data.routine_my_menus,
            this.locale
          );
        }
        this.menus = res.data.routine_my_menus;
      });
    },
    longin() {
      this.$store.commit("isLogin", true);
      this.$store.commit("isTourists", false);
    },
    getHotSearchList() {
      this.$axios.get("/api/front/search/keyword").then((res) => {
        this.hotSearchList = res.data;
        if (this.hotSearchList && this.hotSearchList.length > 4) {
          this.hotSearchList = this.hotSearchList.slice(0, 3);
        }
      });
    },
    watchScroll(e) {
      const y = window.scrollY || document.documentElement.scrollTop;
      if (y > 10) return;
      this.hide = false;
    },
    AddFavorite() {
      let url = window.location;
      let title = document.title;
      let ua = navigator.userAgent.toLowerCase();
      if (ua.indexOf("360se") > -1) {
        this.$message(this.$t(`message.tips.browser`));
      } else if (ua.indexOf("msie 8") > -1) {
        window.external.AddToFavoritesBar(url, title); //IE8
      } else if (document.all) {
        try {
          window.external.addFavorite(url, title);
        } catch (e) {
          this.$message(this.$t(`message.tips.nubrowser`));
        }
      } else if (window.sidebar) {
        this.$message(this.$t(`message.tips.nubrowser`));
      } else {
        this.$message(this.$t(`message.tips.nubrowser`));
      }
    },
    submit() {
      this.$router.push({
        path: "/goods/goods_search",
        query: {
          title: this.search ? this.search.trim() : "",
          cid: this.cid,
        },
      });
    },
    handleClose() {
      this.dialogVisible = false;
    },
    showLogin() {
      this.$store.commit("isLogin", true);
    },
    keyDown(e) {
      // this.submit()
    },
    loginOMS() {
      this.$nuxt.$loading.start();
      const user = this.$auth.user;
      const account = user.userType === "email" ? user.email : user.phone;
      let formData = new FormData();
      formData.append("account", account);
      this.$axios
        .post(`/api/front/user/login`, formData)
        .then((res) => {
          if (res.code === 200) {
            window.open(res.data, "_blank");
          } else {
            // this.$message(this.$t('page.users.userInfo.accountNotSynchronized'))
          }
        })
        .finally(() => {
          this.$nuxt.$loading.finish();
        });
    },
  },
};
</script>
<style scoped lang="scss">
@import "@/assets/css/variables.scss";
.userInfo {
  ::v-deep.el-divider--horizontal {
    margin: 10px 0 !important;
  }
}

.dropdownBox {
  width: 245px;
}

.btnBox {
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  justify-content: center;
}

.userBox {
  padding: 10px 20px 20px 20px;
  .avatarPic {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 10px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .nickname {
    font-size: 16px;
    font-family: Arial-BoldMT, Arial;
    font-weight: bold;
    color: #333333;
    margin-bottom: 5px;
  }
  .count {
    font-size: 12px;
    font-family: ArialMT;
    color: #999999;
  }
}

.container {
  width: 100%;
  z-index: 99;
  position: sticky;
  top: 0;
  .nav {
    background: #071323;
    .nav_con {
      width: 1200px;
      height: 44px;
      margin: auto;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 48px;
      font-size: 16px;
      font-weight: 700;
      color: #fff;
      line-height: 22px;
      > div {
        cursor: pointer;
      }

      a {
        color: #fff;
      }
    }
  }

  .header {
    width: 100%;
    height: 100px;
    margin: auto;
    background: #ffffff;
    font-size: 14px;
    font-weight: 500;

    .header_con {
      width: 1200px;
      height: 100px;
      margin: auto;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      position: relative;

      .more-but {
        height: 44px;
        padding: 0 20px;
        border-radius: 6px;
        background: $user--color-primary;
        color: #fff;
        font-size: 16px;
        line-height: 22px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        margin-right: 16px;
        cursor: pointer;
        .iconfont2 {
          font-size: 20px;
          margin-right: 8px;
        }
      }

      .logo {
        height: 40px;
        margin-right: 10px;
        img {
          height: 40px;
        }
      }

      .home-input {
        flex: 1;
        height: 44px;
        box-sizing: border-box;
        border: 2px solid $user--color-primary;
        border-radius: 6px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 16px;

        .left_select {
          flex: 1;
          margin-right: 16px;

          input {
            width: 100%;
            outline: none;
            border: 0;
            &:focus {
              caret-color: $user--color-primary;
            }
          }
        }
        .search {
          width: 70px;
          height: 44px;
          background: $user--color-primary;
          border-radius: 6px;
          color: #fff;
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
        }
      }
      .lang-card {
        margin-left: 10px;
        height: 40px;
        padding: 0 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: $use-color-info;
        cursor: pointer;
        .iconfont2 {
          font-size: 22px;
          margin-right: 8px;
        }
      }
      .car-card {
        color: $use-color-info;
        margin-left: 20px;
        margin-right: 20px;
        cursor: pointer;

        .car {
          position: relative;
          .iconfont2 {
            font-size: 22px;
          }
          .num {
            position: absolute;
            top: -4px;
            left: 10px;
            color: #fff;
            font-size: 12px;
            padding: 2px 5px;
            border-radius: 100px;
            background-color: $user--color-dress;
            display: inline-block;
            transform: scale(0.8);
            line-height: 14px;
          }
        }
      }
      .login-user {
        width: 22px;
        height: 22px;
        cursor: pointer;
        margin-left: 20px;
        .login-user-img {
          width: 100%;
          height: 100%;
          .iconfont2 {
            font-size: 22px;
          }
          img {
            width: 22px;
            height: 22px;
            border-radius: 50%;
          }
        }
      }
      ::v-deep .el-divider--vertical {
        margin: 0;
      }
    }
  }
}

.classifyDialog {
  ::v-deep .el-dialog__header {
    display: none;
  }
  ::v-deep .el-dialog__body {
    border-radius: 6px;
  }

  ::v-deep .v-modal {
    top: 144px;
  }
  .category {
    background-color: #fff;
    box-sizing: border-box;
    height: 100%;
    height: 500px;
    overflow: hidden;
    gap: 16px;
  }
}
.ic-sousuo {
  font-size: 20px;
}
</style>
